import { Coins, CalendarCheck, Flame } from 'lucide-react';
import { UserProfileDto } from '@/types/account/profile';

type Props = {
	profile: UserProfileDto;
};

export default function UserProfileStats({ profile }: Props) {
	const showDonation = profile.totalDonatedAmount !== null && profile.totalDonatedAmount !== undefined;

	return (
		<section className="user-profile__stats" aria-label="회원 활동 통계">
			{showDonation && (
				<div className="user-profile__stat">
					<Coins size={20} className="user-profile__stat-icon user-profile__stat-icon--coins" strokeWidth={1.75} />
					<div className="user-profile__stat-body">
						<span className="user-profile__stat-label">후원 총액</span>
						<span className="user-profile__stat-value">{(profile.totalDonatedAmount ?? 0).toLocaleString()} P</span>
					</div>
				</div>
			)}

			<div className="user-profile__stat">
				<CalendarCheck size={20} className="user-profile__stat-icon user-profile__stat-icon--attendance" strokeWidth={1.75} />
				<div className="user-profile__stat-body">
					<span className="user-profile__stat-label">출석 수</span>
					<span className="user-profile__stat-value">{profile.attendanceCount.toLocaleString()}일</span>
				</div>
			</div>

			<div className="user-profile__stat">
				<Flame size={20} className="user-profile__stat-icon user-profile__stat-icon--streak" strokeWidth={1.75} />
				<div className="user-profile__stat-body">
					<span className="user-profile__stat-label">개근 일수</span>
					<span className="user-profile__stat-value">{profile.consecutiveDays.toLocaleString()}일</span>
				</div>
			</div>
		</section>
	);
}